<template>
    <div class="bigBox">
        <div class="barCharts">
            <div class="title">
                <p>成绩概览</p>
            </div>
            <div id="main">
            </div>
        </div>
        <div class="ranking">
            <div w50rem h24rem p3 flex="~ col" justify-center items-center bg-dark>
                <div>
                    <scroll-ranking-board :config="config" style="width:100%;height:341px" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import echarts from '../echarts/index.js'
import { onMounted, reactive } from 'vue';

import { ScrollRankingBoard } from '@kjgl77/datav-vue3'

const config = reactive({
    data: [
        {
            name: '团队1',
            value: 92,
        },
        {
            name: '团队2',
            value: 82,
        },
        {
            name: '团队3',
            value: 88,
        },
        {
            name: '团队4',
            value: 70,
        },
        {
            name: '团队5',
            value: 80,
        },
        {
            name: '团队6',
            value: 97,
        },
    ],
    unit: '分',
})

onMounted(() => {
    const myChart = echarts.init(document.getElementById('main'));
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['团队1', '团队2', '团队3', '团队4', '团队5', '团队6'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '分数',
                type: 'bar',
                barWidth: '60%',
                data: [92, 82, 88, 70, 80, 97],
                color: '#c0c7d2'
            }
        ],
        dataZoom: [
            {
                id: 'dataZoomX',
                type: '',
                xAxisIndex: [0],
                filterMode: 'filter',
            },
        ],
        emphasis: {
            itemStyle: {
                // 高亮时点的颜色。
                color: '#dbdde3'
                // color: 'pink'
            },
        }
    };

    myChart.setOption(option);
    window.onresize = function() {
    myChart.resize();
  };


})
</script>
<style scoped>
.bigBox {
    width: 100%;
    height: 341px;
    display: flex;
}
.barCharts{
    width: 55%;
    margin-right: 5%;
    height: 100%;
}

#main {
    height: 91%;
    width: 100%;
}
.title{
    height: 9%;
    width: 100%;
}
.title p {
    font-family: Source Han Sans CN;
    font-size: 2em;
    font-weight: 550;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #707070;
}

.ranking {
    width: 45%;
    height: 100%;
}
</style>
<style>
.dv-scroll-ranking-board .ranking-info {
    /* background-color: pink; */
    font-family: Source Han Sans CN;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    text-align: left !important;
    color: #707070;
    line-height: 210%;
}

.dv-scroll-ranking-board .ranking-info .rank {
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 27px;
    letter-spacing: 0px;
    color: #8493a6 !important;
}

.dv-scroll-ranking-board .ranking-info .info-name {
    padding-left: 1.1%;
}

.dv-scroll-ranking-board .ranking-column .inside-column {
    background-color: #8493a6 !important;
}

.dv-scroll-ranking-board .ranking-column {
    border-bottom: 1px solid #8493a6 !important;
}
</style>